<template>
	<view class="main-box">
		<view class="navigator-bar" :style="{'padding-top': safeTop + 'px'}">
			<image class="back-img" src="/static/backArrow2.png" @click="back()"></image>
			<text class="page-title">{{ status === 0 ? '商家认证' : '已认证' }}</text>
			<view class="submit-button" @click="submit()" v-if="step === 2">提交</view>
		</view>
		<view class="upload-license-box" v-if="step === 1" :style="{'height': `calc(100vh - ${safeTop}px - 86rpx)`}">
			<view class="upload-img" @click="uploadLicense()">
				<image v-if="licenseImg" class="license-img" :src="licenseImg" mode="aspectFit"></image>
				<view class="upload-text">上传营业执照</view>
			</view>
			<view class="next-button" :style="{'bottom': `calc(${safeBottom}px + 60rpx)`}" @click="nextStep()">下一步
			</view>
		</view>
		<scroll-view class="shop-list" scroll-y="true" :style="{'height': `calc(100vh - ${safeTop}px - 86rpx)`}"
			v-if="step == 2">
			<view class="info-item">
				<text class="info-title">店铺名称</text>
				<view class="info-content">
					<input class="info-text" v-model="shopInfo.name" placeholder="请输入店铺名称" />
				</view>
			</view>
			<view class="line"></view>
			<view class="info-item">
				<text class="info-title">电话</text>
				<view class="info-content">
					<input class="info-text" v-model="shopInfo.phone" placeholder="请输入店铺联系电话" />
				</view>
			</view>
			<view class="line"></view>
			<view class="content-item-box">
				<text class="item-title">人均费用</text>
				<view class="item-content-box">
					<input class="content-input" placeholder="请输入人均费用" v-model="shopInfo.cost" />
					<text class="content-text">元</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="content-item-box">
				<text class="item-title">营业时间</text>
				<view class="item-content-box">
					<picker mode="time" @change="startTimeChange" :value="startTime">
						<text class="content-text">{{ startTime ? startTime : '开始时间' }}</text>
					</picker>
					<text class="time-connector">-</text> 
					<picker mode="time" @change="endTimeChange" :value="endTime">
						<text class="content-text">{{ endTime ? endTime : '结束时间' }}</text>
					</picker>
				</view>
			</view>
			<view class="line"></view>
			<view class="content-box">
				<view class="content-item-box">
					<text class="item-title">地址</text>
					<view class="item-content-box">
						<image class="location-img" src="/static/formLocation.png" @click="choosePlace()"></image>
					</view>
				</view>
				<view class="location-box">
					<image class="location-img" src="/static/fp-mapCheck.png"></image>
					<view class="location-content-box">
						<text class="location-title">{{ poi.name }}</text>
						<text class="location-text">{{ poi.address }}</text>
					</view>
				</view>
			</view>
			<view class="info-item-description">
				<view class="info-title" style="margin-bottom: 30rpx;">简介</view>
				<input class="description-input" v-model="shopInfo.description" placeholder="写点什么吧" />
			</view>
			<view class="line"></view>
			<view class="info-item-tag">
				<text class="info-title">特色服务</text>
				<view class="tag-box">
					<view class="tag-item" v-for="item of service">{{ item }}</view>
					<view class="add-label" @click="addService()">
						<image class="add-label-img" src="/static/addPic1.png"></image>
					</view>
				</view>
			</view>
			<view class="info-item-tag">
				<text class="info-title">标签</text>
				<view class="tag-box">
					<view class="tag-item" v-for="label of labels">{{ label }}</view>
					<view class="add-label" @click="chooseLabels()">
						<image class="add-label-img" src="/static/addPic1.png"></image>
					</view>
				</view>
			</view>
			<view class="content-box">
				<view class="content-item-box">
					<text class="item-title">店铺图片</text>
				</view>
				<view class="img-list-box">
					<view class="img-item" v-for="img of imgs">
						<view class="img-box">
							<image class="img" :src="img" mode="aspectFill"></image>
							<image class="close-img" src="/static/picDelete.png" @click="removeImage(img)"></image>
						</view>
						<view class="cover" v-if="img === shopInfo.cover">封面</view>
						<view class="choose-cover" v-if="img !== shopInfo.cover" @click="chooseCover(img)">设为封面</view>
					</view>
					<view class="add-img-box" @click="addImage()">
						<image class="add-img" src="/static/addPic1.png"></image>
					</view>
				</view>
			</view>
			<view class="cancellation-button" v-if="status === 1" @click="cancellationShop()">注销店铺</view>
			<view style="height: 60rpx;"></view>
		</scroll-view>
		<uni-popup ref="centerPopup" :maskClick="false" type="center" mask-background-color="rgba(0,0,0,0.85)">
			<view class="center-popup-box">
				<view class="service-title">请添加服务(最多5个)</view>
				<view class="service-row" v-for="(value, index) of tmpService">
					<view class="input-box">
						<input class="service-input" maxlength="4" placeholder="请输入服务(最多4个字)" v-model="tmpService[index]" />
					</view>
					<image class="add-img" src="/static/addPic1.png" v-if="index + 1 === tmpService.length && tmpService.length < 5" @click="add(value)"></image>
					<image class="reduce-img" src="/static/searchLogDelete.png" v-if="index + 1 < tmpService.length" @click="reduce(index)"></image>
				</view>
				<view class="button-box">
					<view class="cancel-button" @click="closePopup()">取消</view>
					<view class="confirm-button" @click="confirmService()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				safeTop: 0,
				safeBottom: 0,
				step: 1,
				licenseImg: '',
				status: 0,
				shopInfo: {
					name: '',
					phone: '',
					cost: '',
					description: '',
					cover: ''
				},
				startTime: '08:00',
				endTime: '22:00',
				labels: [],
				service: [],
				tmpService: [],
				imgs: [],
				poi: {}
			};
		},
		onLoad(e) {
			this.safeTop = this.$safeTop;
			this.safeBottom = this.$safeBottom;
			if (e.id) {
				this.step = 2;
				this.status = 1;
				this.getShopInfo(e.id);
			} else {
				this.getLocation();
			}
			uni.$on('choosePlace', (poi) => {
				this.poi = poi;
			});
			uni.$on('chooseLabelForShop', (labels) => {
				this.labels = labels;
			});
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			getShopInfo(id) {
				const params = {
					id: id
				}
				this.$apis.getShopDetail(params).then(res => {
					if (res.code === 0) {
						this.shopInfo = res.data;
						this.labels = this.shopInfo.labels.split(',');
						this.service = this.shopInfo.serviceName.split(',');
						this.imgs = this.shopInfo.smallImages.split(',');
						let placeList = this.shopInfo.place.split(',');
						this.poi = {
							name: placeList[0],
							address: placeList[1],
							location: {
								latitude: this.shopInfo.lat,
								longitude: this.shopInfo.lon
							}
						}
						let timeList = this.shopInfo.businessHours.split(',');
						this.startTime = timeList[0];
						this.endTime = timeList[1];
					}
				});
			},
			uploadLicense() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (ret) => {
						const params = {
							files: ret.tempFilePaths
						}
						this.$apis.uploadFiles(params).then((res) => {
							if (res.code === 0) {
								this.licenseImg = res.data[0].url;
							}
						});
					}
				})
			},
			nextStep() {
				if (this.licenseImg) {
					this.step = 2;
				} else {
					uni.showToast({
						title: '请先上传营业执照',
						icon: "success"
					})
				}
			},
			startTimeChange(e) {
				this.startTime = e.detail.value;
			},
			endTimeChange(e) {
				this.endTime = e.detail.value;
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						const address = res.address;
						if (address.poiName) {
							this.poi = {
								name: address.poiName,
								address: address.city + address.district + address.street + address
									.streetNum,
								location: {
									latitude: res.latitude,
									longitude: res.longitude
								}
							}
						}
					}
				})
			},
			choosePlace() {
				uni.navigateTo({
					url: '/pages/choosePlace?type=2'
				})
			},
			addService() {
				this.tmpService = [];
				this.service.forEach(item => {
					this.tmpService.push(item);
				})
				if (this.tmpService.length === 0) {
					this.tmpService.push('');
				}
				this.$refs.centerPopup.open();
			},
			add(service) {
				if (service) {
					this.tmpService.push('');
				} else {
					uni.showToast({
						title: '请先输入服务再添加',
						icon: 'none'
					})
				}
			},
			reduce(index) {
				this.tmpService.splice(index, 1);
			},
			closePopup() {
				this.$refs.centerPopup.close();
			},
			confirmService() {
				this.$refs.centerPopup.close();
				this.service = [];
				this.tmpService.forEach(item => {
					this.service.push(item);
				})
			},
			chooseLabels() {
				uni.navigateTo({
					url: '/pages/interestChoose?type=3&labels=' + this.labels.join(',')
				})
			},
			addImage() {
				uni.chooseImage({
					count: this.maxImgNum - this.imgs.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (ret) => {
						const params = {
							files: ret.tempFilePaths
						}
						this.$apis.uploadFiles(params).then((res) => {
							if (res.code === 0) {
								res.data.forEach(item => {
									this.imgs.push(item.url);
								})
							}
						});
					}
				})
			},
			removeImage(img) {
				if (this.shopInfo.cover === img) {
					this.shopInfo.cover = '';
				}
				let index = this.imgs.findIndex(item => item === img);
				this.imgs.splice(index, 1);
			},
			chooseCover(img) {
				this.shopInfo.cover = img;
			},
			submit() {
				if (!this.shopInfo.name) {
					uni.showToast({
						title: '请输入店铺名称',
						icon: 'none'
					})
					return;
				}
				if (!this.shopInfo.phone) {
					uni.showToast({
						title: '请输入店铺电话',
						icon: 'none'
					})
					return;
				}
				if (!this.shopInfo.cost) {
					uni.showToast({
						title: '请输入人均费用',
						icon: 'none'
					})
					return;
				}
				if (!this.shopInfo.description) {
					uni.showToast({
						title: '请输入店铺简介',
						icon: 'none'
					})
					return;
				}
				if (this.service.length < 1) {
					uni.showToast({
						title: '请添加店铺服务',
						icon: 'none'
					})
					return;
				}
				if (this.labels.length < 1) {
					uni.showToast({
						title: '请添加店铺标签',
						icon: 'none'
					})
					return;
				}
				if (this.imgs.length < 1) {
					uni.showToast({
						title: '请上传店铺图片',
						icon: 'none'
					})
					return;
				}
				if (!this.shopInfo.cover) {
					uni.showToast({
						title: '请选择店铺封面',
						icon: 'none'
					})
					return;
				}
				this.shopInfo.place = `${this.poi.name},${this.poi.address}`;
				this.shopInfo.businessHours = `${this.startTime},${this.endTime}`;
				this.shopInfo.lat = this.poi.location.latitude;
				this.shopInfo.lon = this.poi.location.longitude;
				this.shopInfo.serviceName = this.service.join(',');
				this.shopInfo.labels = this.labels.join(',');
				this.shopInfo.smallImages = this.imgs.join(',');
				if (this.status === 0) {
					this.$apis.createShop(this.shopInfo).then(res => {
						if (res.code === 0) {
							uni.showToast({
								title: '创建成功!',
								icon: 'success'
							})
							uni.navigateBack();
						}
					})
				} else {
					this.$apis.updateShop(this.shopInfo).then(res => {
						if (res.code === 0) {
							uni.showToast({
								title: '修改成功!',
								icon: 'success'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		
		.center-popup-box {
			background-color: white;
			width: 686rpx;
			padding: 40rpx 0 40rpx 0;
			border-radius: 48rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.service-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
				margin-bottom: 20rpx;
				text-align: center;
			}
			
			.service-row {
				width: 600rpx;
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.input-box {
					width: 550rpx;
					height: 80rpx;
					border-radius: 16rpx;
					background: #F6F7F9;
					display: flex;
					align-items: center;
					font-size: 38rpx;
					
					.service-input {
						width: 400rpx;
						margin-left: 20rpx;
					}
				}
				
				.add-img {
					width: 36rpx;
					height: 36rpx;
				}
				
				.reduce-img {
					width: 32rpx;
					height: 34rpx;
				}
			}
			
			.button-box {
				width: 600rpx;
				margin-top: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.cancel-button {
					width: 280rpx;
					height: 100rpx;
					background: #F6F7F9;
					border-radius: 24rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #222222;
					text-align: center;
					line-height: 100rpx;
				}
				
				.confirm-button {
					width: 280rpx;
					height: 100rpx;
					background: #FF5E2E;
					border-radius: 24rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 100rpx;
				}
			}
		}

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.back-img {
				width: 24rpx;
				height: 40rpx;
				margin-left: 42rpx;
				z-index: 10;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}

			.submit-button {
				margin-right: 42rpx;
				width: 123rpx;
				height: 61rpx;
				background: #FF5E2E;
				border-radius: 31rpx;
				font-size: 31rpx;
				line-height: 61rpx;
				text-align: center;
				font-weight: 400;
				color: #FFFFFF;
				z-index: 10;
			}
		}

		.upload-license-box {
			width: 100vw;
			position: relative;

			.upload-img {
				width: 686rpx;
				height: 512rpx;
				background: #F6F7F9;
				border-radius: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 32rpx;
				margin-top: 130rpx;

				.license-img {
					width: 686rpx;
					height: 512rpx;
					border-radius: 28rpx;
				}

				.upload-text {
					font-size: 40rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.next-button {
				width: 590rpx;
				height: 100rpx;
				background: #FF5E2E;
				border-radius: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
				position: absolute;
				left: 80rpx;
			}
		}

		.shop-list {
			width: 100vw;

			.info-title {
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
			}

			.info-item {
				width: 654rpx;
				height: 108rpx;
				padding: 0 46rpx 0 46rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info-content {
					display: flex;
					align-items: center;

					.info-arrow {
						width: 11rpx;
						height: 23rpx;
						margin-left: 19rpx;
					}
				}

				.info-text {
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
					text-align: end;
				}

				.description-input {
					margin-top: 30rpx;
					width: 100%;
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
				}
			}

			.content-item-box {
				width: 654rpx;
				margin-left: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 34rpx 0 34rpx 0;

				.name-input {
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
					width: 100%;
				}

				.content-input {
					text-align: end;
					margin-right: 20rpx;
				}

				.item-title {
					font-size: 32rpx;
					font-weight: 400;
					color: #999999;
				}

				.item-content-box {
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.arrow-img {
						margin-left: 24rpx;
						width: 12rpx;
						height: 24rpx;
					}

					.location-img {
						width: 32rpx;
						height: 40rpx;
					}

					.collect-img {
						margin-left: 40rpx;
						width: 40rpx;
						height: 38rpx;
					}
					
					.time-connector {
						margin: 0 20rpx 0 20rpx;
					}
				}
			}

			.content-box {
				padding-bottom: 32rpx;

				.location-box {
					width: 654rpx;
					height: 144rpx;
					margin-left: 48rpx;
					background: #FFFFFF;
					box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
					border-radius: 28rpx;
					display: flex;
					align-items: center;

					.location-img {
						width: 80rpx;
						height: 80rpx;
						margin-left: 40rpx;
						margin-right: 40rpx;
					}

					.location-content-box {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;

						.location-title {
							font-size: 32rpx;
							font-weight: bold;
							color: #222222;
						}

						.location-text {
							margin-top: 8rpx;
							width: 400rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
				
				.img-list-box {
					width: 680rpx;
					margin-left: 48rpx;
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
				
					.img-item {
						margin-right: 18rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 18rpx;
				
						.img-box {
							position: relative;
				
							.img {
								width: 150rpx;
								height: 150rpx;
								border-radius: 28rpx;
							}
				
							.close-img {
								width: 42rpx;
								height: 42rpx;
								position: absolute;
								top: 8rpx;
								right: 8rpx;
							}
						}
				
						.cover {
							width: 120rpx;
							height: 48rpx;
							border-radius: 26rpx;
							border: 2rpx solid #FF5E2E;
							font-size: 24rpx;
							font-weight: 400;
							color: #FF5E2E;
							line-height: 48rpx;
							text-align: center;
						}
				
						.choose-cover {
							width: 120rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 26rpx;
							border: 2rpx solid #F0F3F6;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 48rpx;
							text-align: center;
						}
					}
				
					.add-img-box {
						width: 150rpx;
						height: 150rpx;
						border-radius: 28rpx;
						border: 2rpx solid #F0F3F6;
						display: flex;
						align-items: center;
						justify-content: center;
				
						.add-img {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}
			
			.cancellation-button {
				width: 590rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				border: 2rpx solid #F0F3F6;
				font-size: 32rpx;
				font-weight: bold;
				color: #999999;
				line-height: 100rpx;
				text-align: center;
				margin-top: 60rpx;
				margin-left: 80rpx;
			}

			.info-item-description {
				width: 654rpx;
				padding: 33rpx 46rpx 33rpx 46rpx;
				display: flex;
				flex-direction: column;
			}

			.info-item-tag {
				width: 654rpx;
				padding: 33rpx 46rpx 33rpx 46rpx;
				display: flex;
				flex-direction: column;

				.tag-box {
					display: flex;
					flex-wrap: wrap;
					margin-top: 32rpx;

					.tag-item {
						width: 144rpx;
						height: 64rpx;
						border-radius: 32rpx;
						border: 2rpx solid #F0F3F6;
						font-size: 28rpx;
						line-height: 64rpx;
						font-weight: 400;
						text-align: center;
						color: #222222;
						margin-bottom: 16rpx;
						margin-right: 16rpx;
					}

					.add-label {
						width: 144rpx;
						height: 64rpx;
						border-radius: 32rpx;
						border: 2rpx solid #F0F3F6;
						font-size: 50rpx;
						font-weight: 400;
						color: #DDDDDD;
						text-align: center;
						line-height: 64rpx;

						.add-label-img {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}

			.line {
				width: 654rpx;
				height: 2rpx;
				background: #F0F3F6;
				margin-left: 46rpx;
			}
		}
	}
</style>
